<template>
	<view class="category">
		<view class="index-header" @click="handleSearch">
			<image src="../../static/images/icon/search.png"></image>
			<text>搜索</text>
		</view>
		<view class="category-main">
			<view class="category-left">
				<view :class="index==indexId?'active':'category-left-nav'" v-for="(item,index)  in titList" :key="index"
					@click="handleClick(item,index)">
					{{item.categoryName}}
				</view>
			</view>
			<view class="category-right">
				<image :src="img"></image>
				<view class="main-con-1">
					<view class="main-con-box" v-for="(item,index) in records" :key="index">
						<image :src="item.pic" @click="handBan(item)"></image>
						<view class="main-con-box-right">
							<view class="right-title">
								{{item.prodName}}
							</view>
							<view class="right-p">
								{{item.brief}}
							</view>
							<view class="rihgt-foot">
								<view class="right-foot-l">
									￥{{item.price}} <text>.00</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var http = require("../../utils/http.js")
	export default {
		data() {
			return {
				titList: [],
				isok: false,
				indexId: "",
				img: "",
				records: [],
				categoryId:"",

			}
		},
		onLoad() {
			http.request({
				url: "/category/categoryInfo",
				method: "get",
				data: {
					parentId: ""
				},
				callBack: res => {
					this.titList = res
					this.img = res[0].pic
					// console.log(this.titList);
				}
			});
			http.request({
				url: "/prod/pageProd",
				method: "get",
				data: {
					categoryId: 87
				},
				callBack: res => {
					// console.log(res.records[0]);
					this.records = res.records

					// console.log(this.conList);
				}
			});
		},
		methods: {
			handleClick(row, index) {
				// console.log(row);
				this.indexId = index
				this.img = row.pic
				this.categoryId=row.categoryId
				this.handleCon()
			},
			handleCon(){
				http.request({
					url: "/prod/pageProd",
					method: "get",
					data: {
						categoryId: this.categoryId
					},
					callBack: res => {
						// console.log(res.records[0]);
						this.records = res.records
				
						// console.log(this.conList);
					}
				});
			},
			handBan(row) {
				console.log(row);
				if (row.prodId) {
					uni.navigateTo({
						url: `/pages/prod/prod?prodid=${row.prodId}`
					})
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.category::v-deep {
		.index-header {
			text-align: center;
			padding: 10px 0;
			border-bottom: 1px solid #ccc;
			padding-bottom: 20px;

			image {
				width: 16px;
				height: 16px;
				margin-right: 5px;
			}

			text {
				font-size: 12px;
				color: #999;
			}
		}

		.category-main {
			display: flex;
			justify-content: space-between;

			.category-left {
				width: 30%;
				text-align: center;

				.active {
					position: relative;
					color: #f00;
					font-weight: 600;
					height: 40px;
					line-height: 40px;
				}

				.active::before {
					content: "";
					position: absolute;
					left: 0;
					top: 10px;
					width: 4px;
					height: 16px;
					background-color: #f00;
					display: inline-block;
				}

				.category-left-nav {
					height: 40px;
					line-height: 40px;

				}
			}

			.category-right {
				width: 70%;
				padding: 10px;

				>image {
					height: 100px;
					margin-bottom: 20upx;
				}

				.main-con-1 {
					.main-con-box {
						display: flex;
						justify-content: space-between;
						margin-bottom: 10px;

						image {
							width: 100px;
							height: 80px;
							margin-right: 10px;
						}

						.main-con-box-right {
							width: 62%;

							.right-title {
								margin-bottom: 10upx;
								/* 文本不换行 */
								white-space: nowrap;
								/* 超出隐藏 */
								overflow: hidden;
								/* 显示省略号 */
								text-overflow: ellipsis;
							}

							.right-p {
								font-size: 12px;
								color: #999;
								margin-bottom: 10px;
							}


						}
					}
				}

				.rihgt-foot {
					color: #f00;
					display: flex;
					justify-content: space-between;
					align-items: center;

					text {
						font-size: 12px;
					}
				}
			}
		}

	}
</style>